<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下单界面</title>
    <link rel="stylesheet" href="../../css/elementui.css">
    <link rel="stylesheet" href="../../css/user-buy.css">
    <link rel="stylesheet" href="../../css/user-style.css" >
    <link rel="shortcut icon" href="../../img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css"/>
</head>
<body>
<div id="app">
    <div id="header">
        <!-- 顶部导航栏 -->
        <nav id="site-nav" role="navigation">
            <div class="workArea">
                <!-- 导航栏左半部分,如果取不到用户信息则显示如下： -->
                <span v-if="!login">
                    <span>喵，欢迎来天猫</span>
                    <span><a href="/pages/login.html">请登录</a></span>
                    <span><a href="/pages/user/regist.html">免费注册</a></span>
                </span>
                <!-- 如果用户成功登录，则显示如下： -->
                <span v-if="login">
                    <span>Hi，{{loginUser.name}}</span>
                    <span><a href="nowhere">积分 <strong>1325</strong></a></span>
                    <span @click="logout"><a href="#">退出</a></span>
                </span>
                <!-- 导航栏右半部分：使用Bootstrap的pull-right类 -->
                <span class="pull-right" v-if="login">
                    <a href="/pages/user/order.html">我的订单</a>
                    <a href="/pages/user/cart.html">
                        <span class="glyphicon glyphicon-shopping-cart redColor"></span>
                        购物车<strong id="cartTotalItemNumber">{{shopNum}}</strong>件
                    </a>
                </span>
            </div>
        </nav>

    </div>
    <div class="buyPageDiv">
        <form action="pay.html" method="post">

            <div class="buyFlow">
                <img class="pull-left" src="../../img/simpleLogo.png">
                <img class="pull-right" src="../../img/buyflow.png" style="">
                <div style="clear:both"></div>
            </div>
            <!--收货地址-->
            <div class="address">
                <div class="addressTip">输入收货地址</div>
                <div>
                    <!--选择已有的地址  v-if="!addressInput"-->
                    <el-card class="box-card" style="background-color: aliceblue" v-if="!addressInput">
                        <div slot="header" class="clearfix">
                            <span>收货地址</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="findAddressData">更换地址</el-button>
                        </div>
                        <div class="text item">
                            收货人：{{address.receiverName}}
                        </div>
                        <div class="text item">
                            手机号码：{{address.phoneNumber}}
                        </div>
                        <div class="text item">
                            收货地址：{{address.address}}
                        </div>
                        <div class="text item">
                            备注信息：{{address.remarks}}
                        </div>
                    </el-card>
                    <!--选择其他已有地址显示的对话框-->
                    <el-dialog title="收货地址" :visible.sync="dialogTableVisible" width="65%">
                        <template>
                            <el-table
                                    ref="singleTable"
                                    :data="addressData"
                                    highlight-current-row
                                    @current-change="handleCurrentChange"
                                    style="width: 100%">
                                <el-table-column
                                        property="receiverName"
                                        label="收货人"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        property="phoneNumber"
                                        label="手机号码"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        property="address"
                                        label="地址">
                                </el-table-column>
                                <el-table-column
                                        property="remarks"
                                        label="备注">
                                </el-table-column>
                            </el-table>
                            <div style="margin-top: 20px">
                                <el-button plain @click="newAdd" style="width: 100px">输入新地址</el-button>
                                <el-button @click="setCurrent()" style="width: 100px">取 消</el-button>
                                <el-button type="primary" @click="changeAdd" style="width: 100px">确 定</el-button>
                            </div>
                        </template>
                    </el-dialog>
                    <!--手动输入新地址-->
                    <table class="addressTable" v-if="addressInput">
                        <tr>
                            <td class="firstColumn">详细地址<span class="redStar">*</span></td>
                            <td><textarea name="address" placeholder="建议您如实填写详细收货地址，例如街道名称、门牌号码、楼层和房间号等信息"></textarea></td>
                        </tr>
                        <tr>
                            <td>收货人姓名<span class="redStar">*</span></td>
                            <td><input name="receiver" placeholder="长度不超过25个字符" type="text"></td>
                        </tr>
                        <tr>
                            <td>手机号码 <span class="redStar">*</span></td>
                            <td><input name="mobile" placeholder="请输入11位手机号码" type="text"></td>
                        </tr>
                        <tr>
                            <td>备注</td>
                            <td><input name="post" placeholder="请输入备注信息" type="text"></td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--购买内容-->
            <div class="productList">
                <div class="productListTip">确认订单信息</div>
                <table class="productListTable">
                    <thead>
                    <tr>
                        <th colspan="2" class="productListTableFirstColumn">
                            <img class="tmallbuy" src="../../img/tmallbuy.png">
                            <a class="marketLink" href="#nowhere">店铺：天猫店铺</a>
                            <a class="wangwanglink" href="#nowhere"> <span class="wangwangGif"></span></a>
                        </th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>配送方式</th>
                    </tr>
                    <tr class="rowborder">
                        <td colspan="2"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody class="productListTableTbody"  v-for="(g,index) in goodsDetail">
                      <tr class="orderItemTR">
                        <td class="orderItemFirstTD"><img class="orderItemImg" :src="goodsMainImg[index]">
                        </td>
                        <td class="orderItemProductInfo">
                            <a href="#" class="orderItemProductLink">{{g.titleShow}}</a>
                            <img src="../../img/creditcard.png" title="支持信用卡支付">
                            <img src="../../img/7day.png" title="消费者保障服务,承诺7天退货">
                            <img src="../../img/promise.png" title="消费者保障服务,承诺如实描述">
                        </td>
                        <td>
                            <span>{{g.lowPrice}}</span>
                        </td>
                        <td>
                            <span class="orderItemProductNumber">{{cart[index].number}}</span>
                        </td>
                        <td>
                            <span>{{cart[index].money}}</span>
                        </td>
                        <td rowspan="5" class="orderItemLastTD">
                            <label class="orderItemDeliveryLabel">
                                <input type="radio" value="" checked="checked">普通配送
                            </label>
                            <select class="orderItemDeliverySelect" class="form-control">
                                <option>快递 免邮费</option>
                            </select>
                        </td>
                    </tr>
                    </tbody>

                </table>
                <div class="orderItemSumDiv">
                    <div class="pull-left">
                        <span class="leaveMessageText">给卖家留言:</span>
                        <span>
                        <img class="leaveMessageImg" src="../../img/leaveMessage.png">
                    </span>
                        <span class="leaveMessageTextareaSpan">
					<textarea name="user_message" class="leaveMessageTextarea"></textarea>
					<div>
						<span>还可以输入200个字符</span>
					</div>
				</span>
                    </div>
                    <span class="pull-right">店铺合计(含运费): {{total}}</span>
                    <!--<span class="pull-right">店铺合计(含运费): {{total}}</span>-->
                </div>


            </div>

            <div class="orderItemTotalSumDiv">
                <div class="pull-right">
                    <span>实付款：</span>
                    <span class="orderItemTotalSumSpan">{{total}}</span>
                    <!--<span class="orderItemTotalSumSpan">{{total}}</span>-->
                </div>
            </div>

            <div class="submitOrderDiv">
                <form method="post" action="../alipay/alipay.trade.page.pay.jsp">
                <!--<button type="submit" class="submitOrderButton" @click="topay">提交订单</button>-->
                    <button type="submit" class="submitOrderButton"><a href="../alipay/alipay.trade.page.pay.jsp">提交订单</a></button>
                </form>
            </div>
        </form>
    </div>

</div>
</body>

<!-- 引入vue和elementUI所需配置文件 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../../js/vue.js"></script>
<script src="../../js/elementui.js"></script>
<script src="../../js/axios.js"></script>
<!--jquery文件-->
<script type="text/javascript" src="../../plugins/jquery/jQuery-2.2.3.min.js"></script>
<!-- util.js文件 -->
<script type="text/javascript" src="../../js/util.js"></script>
<!-- 页面js文件 -->
<script type="text/javascript" src="../../js/user-buys.js"></script>
<script>
    $(function () {
        $("a.productDetailTopReviewLink").click(function () {
            $("div.productReviewDiv").show();
            $("div.productDetailDiv").hide();
        });
        $("a.productReviewTopPartSelectedLink").click(function () {
            $("div.productReviewDiv").hide();
            $("div.productDetailDiv").show();
        });

        $("span.leaveMessageTextareaSpan").hide();
        $("img.leaveMessageImg").click(function () {

            $(this).hide();
            $("span.leaveMessageTextareaSpan").show();
            $("div.orderItemSumDiv").css("height", "100px");
        });
    });

</script>
</html>